<template>
  <div style="width: 100%; height: 100%;">
    <swiper class="swiper" indicator-dots autoplay>
      <block v-for="(item, index) in product.covers" :key="index">
        <swiper-item @click="previewImage" :id="CDN + '/products/' + item">
          <image :src="CDN + '/products/' + item" mode="aspectFit" style="width: 100%;" />
        </swiper-item>
      </block>
    </swiper>
    <div class="weui-article">
      <div class="weui-article__h1">{{ product.name }}</div>
      <div class="weui-article__section">
        <div class="weui-article__title">类型:{{ product.category.name }}</div>
        <div class="weui-article__section">
          <div class="weui-article__h3">简介:</div>
          <div class="weui-article__p">
            {{ product.description }}
          </div>
          <div class="weui-article__h3">服务详情</div>
          <div class="weui-article__p" v-for="(item, index) in product.contents" :key="index">
            <p v-if="item.contentType === 'TEXT'">{{ item.content }}</p>
            <image v-if="item.contentType === 'IMAGE'" class="weui-article__img" :src="CDN + '/products/' + item.content" mode="widthFix" style="width: 100%; min-height: 100px" />
          </div>
        </div>
      </div>
    </div>
    <div class="fix-button">
      <button open-type="contact" @contact="handleContact" class="button kf" type="primary">客服</button>
      <button class="button ljyd" type="warn" @click="handleGoPreview">立即预定</button>
    </div>
  </div>
</template>

<script>
import productFragment from '@/graphql/fragment/product.graphql'

export default {
  data () {
    return {
      product: {},
      images: [],
      CDN: this.$CDN
    }
  },
  methods: {
    handleContact (e) {
      console.log(e.mp)
    },
    handleGoPreview () {
      if (!wx.getStorageSync('token')) {
        const url = `../login/main?source=detail&id=${this.$root.$mp.query.id}`
        wx.navigateTo({ url })
        return false
      }
      const url = `../preview/main?id=${this.$root.$mp.query.id}`
      wx.navigateTo({ url })
    },
    previewImage (e) {
      console.log(e)
      wx.previewImage({
        current: e.currentTarget.id, // 当前显示图片的http链接
        urls: this.images // 需要预览的图片http链接列表
      })
    }
  },

  onLoad () {
    this.product = this.$apollo.readFragment({
      id: 'Product:' + this.$root.$mp.query.id,
      fragment: productFragment,
      fragmentName: 'product'
    })
    for (let i in this.product.covers) {
      this.images[i] = this.CDN + '/products/' + this.product.covers[i]
    }
    // console.log(this.$root.$mp.query.id, this.$apollo)
  }
}
</script>

<style>
.swiper {
  width: 100%;
  height: 300px;
}
.fix-button {
  display: flex;
  text-align: center;
  position: fixed;
  flex-direction: row;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.button {
  border-radius: 0;
}
.button::after {
  border: none;
  border-radius: 0;
}
.kf {
  width: 180px;
}
.ljyd {
  width: 100%;
}
</style>
